@charset "UTF-8";

:root {
    --vt-c-white: #ffffff;
    --vt-c-white-soft: #f8f8f8;
    --vt-c-white-mute: #f2f2f2;
    --vt-c-black: #181818;
    --vt-c-black-soft: #222222;
    --vt-c-black-mute: #282828;
    --vt-c-indigo: #2c3e50;
    --vt-c-divider-light-1: rgba(60, 60, 60, .29);
    --vt-c-divider-light-2: rgba(60, 60, 60, .12);
    --vt-c-divider-dark-1: rgba(84, 84, 84, .65);
    --vt-c-divider-dark-2: rgba(84, 84, 84, .48);
    --vt-c-text-light-1: var(--vt-c-indigo);
    --vt-c-text-light-2: rgba(60, 60, 60, .66);
    --vt-c-text-dark-1: var(--vt-c-white);
    --vt-c-text-dark-2: rgba(235, 235, 235, .64)
}

:root {
    --color-background: var(--vt-c-white);
    --color-background-soft: var(--vt-c-white-soft);
    --color-background-mute: var(--vt-c-white-mute);
    --color-border: var(--vt-c-divider-light-2);
    --color-border-hover: var(--vt-c-divider-light-1);
    --color-heading: var(--vt-c-text-light-1);
    --color-text: var(--vt-c-text-light-1);
    --section-gap: 160px
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: var(--vt-c-black);
        --color-background-soft: var(--vt-c-black-soft);
        --color-background-mute: var(--vt-c-black-mute);
        --color-border: var(--vt-c-divider-dark-2);
        --color-border-hover: var(--vt-c-divider-dark-1);
        --color-heading: var(--vt-c-text-dark-1);
        --color-text: var(--vt-c-text-dark-2)
    }
}

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    font-weight: 400
}

html {
    height: 100vh
}

body {
    min-height: 100vh;
    color: var(--color-text);
    background: var(--color-background);
    transition: color .5s, background-color .5s;
    line-height: 1.6;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    font-size: 15px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

* {
    margin: 0;
    padding: 0
}

#app {
    background-color: #fff
}

.loading {
    color: #000;
    height: 100vh;
    background-color: #fff
}

.footer-container {
    margin-bottom: 20px;
    color: #666;
    font-size: 12px;
    text-align: center
}

.searchArea {
    padding-right: 24px;
    flex: 1;
    text-align: right;
    position: relative
}

.searchArea input {
    outline: 0;
    line-height: 1.15;
    margin: 0;
    width: 215px;
    height: 36px;
    background: #f3f3f3;
    border-radius: 2px 0 0 2px;
    border: 0;
    position: relative;
    left: 5px;
    font-size: 14px;
    padding-left: 12px
}

.searchArea input::placeholder {
    color: #999
}

.searchArea button {
    background-color: #1ab956;
    border: 0;
    color: #fff;
    width: 65px;
    height: 36px;
    border-radius: 0 2px 2px 0;
    position: relative;
    cursor: pointer;
    transition: all .35s
}

.searchArea button:hover {
    background-color: #47c777
}

.searchArea .suggest {
    text-align: left;
    display: none;
    width: 280px;
    position: absolute;
    top: 58px;
    right: 20px;
    background: #ffffff;
    box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
    border-radius: 2px
}

.searchArea .suggest>p {
    line-height: normal;
    font-size: 12px;
    padding: 12px 12px 0
}

.searchArea .suggest>p img {
    margin-right: 6px;
    width: 12px;
    position: relative;
    top: 2px
}

.searchArea .suggest>p:last-of-type {
    padding-top: 0
}

.searchArea .suggest .suggestList {
    padding: 0 12px;
    font-size: 0;
    margin-top: 8px;
    line-height: normal
}

.searchArea .suggest .suggestList a {
    display: inline-block;
    width: 50%
}

.searchArea .suggest .suggestList a li {
    display: inline-block;
    margin-bottom: 12px;
    cursor: pointer
}

.searchArea .suggest .suggestList a li img {
    width: 32px;
    margin-right: 6px
}

.searchArea .suggest .suggestList a li div {
    display: inline-block
}

.searchArea .suggest .suggestList a li div h1 {
    margin: 0;
    font-size: 12px;
    color: #333;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .35s;
    width: 80px
}

.searchArea .suggest .suggestList a li div p {
    margin-top: 4px;
    font-size: 12px;
    color: #999
}

.searchArea .suggest .suggestList li:hover h1 {
    color: #1ab956
}

.searchArea .suggest .tagList {
    padding: 0 12px 12px;
    font-size: 0;
    line-height: normal
}

.searchArea .suggest .tagList a {
    display: inline-block
}

.searchArea .suggest .tagList a li {
    cursor: pointer;
    display: inline-block;
    padding: 2px 12px;
    background: #f3f3f3;
    border-radius: 12px;
    height: 24px;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    margin-top: 10px;
    margin-right: 8px;
    transition: all .35s
}

.searchArea .suggest .tagList a li:hover {
    background: rgba(26, 185, 86, .1);
    color: #1ab956
}

.searchArea .searchList {
    text-align: left;
    display: none;
    width: 280px;
    position: absolute;
    top: 58px;
    right: 20px;
    background: #ffffff;
    box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
    border-radius: 2px;
    line-height: normal
}

.searchArea .searchList>a {
    display: block;
    font-size: 14px;
    color: #333;
    transition: all .35s;
    height: 44px;
    line-height: 36px;
    border-bottom: 1px solid #E6E6E6;
    padding: 8px 12px 0;
    text-decoration: none
}

.searchArea .searchList>a:hover {
    color: #1ab956
}

.searchArea .searchList ul {
    width: 100%
}

.searchArea .searchList ul a {
    display: block;
    text-decoration: none
}

.searchArea .searchList ul a li {
    cursor: pointer;
    width: 100%;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #333;
    padding: 0 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .35s
}

.searchArea .searchList ul a li:hover {
    background: rgba(26, 185, 86, .1);
    color: #1ab956
}

.header[data-v-60087ae7] {
    min-width: 375px;
    box-sizing: content-box;
    height: 72px;
    opacity: 1;
    background: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 210px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000
}

.header .title[data-v-60087ae7] {
    display: flex;
    align-items: center
}

.header .title img[data-v-60087ae7] {
    /* width: 160px;
    height: 42px; */
    margin-right: 12px
}

.header .title h1[data-v-60087ae7] {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 24px;
    color: #1d2129;
    text-align: left;
    vertical-align: middle
}

.header .download[data-v-60087ae7] {
    min-width: 80px;
    height: 40px;
    opacity: 1;
    border-radius: 10px;
    background: rgb(0, 123, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #fff
}

.header-noscoped {
    min-width: 375px;
    box-sizing: content-box;
    height: 72px;
    opacity: 1;
    background: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000
}

.header-noscoped .title {
    display: flex;
    align-items: center
}

.header-noscoped .title img {
    width: 32px;
    height: 32px;
    margin-right: 12px
}

.header-noscoped .title h1 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 24px;
    color: #1d2129;
    text-align: left;
    vertical-align: middle
}

.page-banner[data-v-0c2251c5] {
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover;
    margin-bottom: 60px;
    display: flex;
    padding: 90px 0;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.banner-text[data-v-0c2251c5] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.banner-img>img[data-v-0c2251c5] {
    width: 520px;
    height: 320px
}

.banner-title[data-v-0c2251c5] {
    width: 420px;
    opacity: 1;
    display: flex;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 66px;
    color: #1d2129;
    text-align: left;
    vertical-align: top
}

.banner-desc[data-v-0c2251c5] {
    width: 420px;
    height: 48px;
    opacity: 1;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #333;
    text-align: left;
    vertical-align: top
}

.banner-btn[data-v-0c2251c5] {
    width: 320px;
    height: 56px;
    border-radius: 8px;
    background: rgb(0, 123, 255);
    justify-content: center;
    align-items: center;
    padding: 0 120px;
    opacity: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 56px;
    color: #fff;
    text-align: left;
    vertical-align: top;
    text-decoration: none
}

.banner-ver[data-v-0c2251c5] {
    width: 420px;
    height: 24px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #999;
    text-align: left;
    vertical-align: top
}

.banner-Carousel[data-v-0c2251c5] {
    position: relative;
    display: inline-block;
    min-width: 1280px;
    white-space: nowrap
}

.banner-Carousel>img[data-v-0c2251c5] {
    vertical-align: middle;
    border-radius: 16px;
    object-fit: cover
}

.banner-Carousel>img[data-v-0c2251c5]:not(:first-child) {
    margin-left: 16px
}

.banner-Carousel-pre[data-v-0c2251c5] {
    cursor: default;
    display: inline-block;
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .8) url(//p1.qhimg.com/t11098f6bcd358af36a07ace35d.png) no-repeat center center;
    top: 122px;
    left: 26px
}

.banner-Carousel-next[data-v-0c2251c5] {
    cursor: default;
    display: inline-block;
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .8) url(//p0.qhimg.com/t11098f6bcdf6333b31ad51a1a2.png) no-repeat center center;
    top: 122px;
    right: 10px
}

.Carousel-select[data-v-0c2251c5] {
    margin-top: 16px
}

.page-banner[data-v-2f3922a1] {
    position: relative;
    width: 100%;
    height: 500px;
    margin-bottom: 60px;
    display: flex;
    padding: 90px 0;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.page-banner a[data-v-2f3922a1] {
    color: unset;
    text-decoration: none
}

.normal-btn[data-v-2f3922a1] {
    transition: all .5s
}

.normal-btn[data-v-2f3922a1]:hover {
    color: #fff;
    background: #15CA71;
    border: none !important
}

.banner-content[data-v-2f3922a1] {
    position: absolute;
    bottom: 32px;
    align-items: center;
    width: 1200px;
    height: 300px;
    background: rgba(255, 255, 255, .8);
    box-sizing: border-box;
    border: 1px solid #FFFFFF;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 0 48px
}

.banner-content-copy[data-v-2f3922a1] {
    width: 250px;
    height: 186px;
    position: absolute;
    top: -100px;
    font-size: 24px;
    color: #79796a
}

.banner-content-copy>img[data-v-2f3922a1] {
    margin-top: 16px
}

.banner-content-top[data-v-2f3922a1] {
    width: 100%;
    padding-bottom: 4px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, .07)
}

.banner-content-top .alert[data-v-2f3922a1] {
    position: absolute;
    left: -116px;
    bottom: 69px;
    width: 232px;
    height: 180px;
    border-radius: 8px;
    opacity: 1;
    background: #FFFFFF;
    box-sizing: border-box;
    border: 1px solid #15CA71;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 16px;
    align-items: center
}

.banner-content-bottom[data-v-2f3922a1] {
    width: 100%;
    height: 99px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: 15px;
    font-size: 12px
}

.banner-text[data-v-2f3922a1] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.banner-img>img[data-v-2f3922a1] {
    width: 520px;
    height: 320px
}

.banner-title[data-v-2f3922a1] {
    width: 420px;
    opacity: 1;
    display: flex;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 66px;
    color: #1d2129;
    text-align: left;
    vertical-align: top
}

.banner-desc[data-v-2f3922a1] {
    width: 420px;
    height: 48px;
    opacity: 1;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #333;
    text-align: left;
    vertical-align: top
}

.banner-btn[data-v-2f3922a1] {
    width: 320px;
    height: 56px;
    border-radius: 8px;
    background: rgb(0, 123, 255);
    justify-content: center;
    align-items: center;
    padding: 0 120px;
    opacity: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 56px;
    color: #fff;
    text-align: left;
    vertical-align: top;
    text-decoration: none
}

.banner-ver[data-v-2f3922a1] {
    width: 420px;
    height: 24px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #999;
    text-align: left;
    vertical-align: top
}

.step[data-v-3681df5d] {
    margin-bottom: 66px
}

.step-list[data-v-3681df5d] {
    display: flex;
    justify-content: space-around;
    width: 1000px;
    height: 152px;
    margin: auto;
    align-items: center;
    text-align: center
}

.step[data-v-322144e0] {
    margin-bottom: 66px
}

.step-list[data-v-322144e0] {
    position: relative;
    display: flex;
    justify-content: space-around;
    width: 1200px;
    height: 152px;
    margin: 48px auto auto;
    align-items: flex-start;
    text-align: center
}

.introduction[data-v-fd0799a5] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 66px
}

.introduction img[data-v-fd0799a5] {
    object-fit: fill;
    margin-left: 6px;
    margin-right: 6px
}

.introduction-list[data-v-fd0799a5] {
    overflow: hidden;
    width: 100%
}

.introduction-list img[data-v-fd0799a5] {
    flex: 0
}

.introduction[data-v-38e88671] {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 66px;
    max-width: 1200px;
    color: #111
}

.introduction img[data-v-38e88671] {
    object-fit: fill;
    margin-left: 6px;
    margin-right: 6px
}

.introduction-list[data-v-38e88671] {
    overflow: hidden;
    width: 100%;
    padding-top: 24px;
    padding-left: 10px;
    line-height: 24px
}

.ability[data-v-66d89975] {
    margin-bottom: 66px
}

.ability-content[data-v-66d89975] {
    display: flex;
    justify-content: space-around;
    width: 1000px;
    height: 184px;
    margin: auto;
    align-items: center;
    background-color: #f0f6fc;
    padding: 32px
}

.ability-list[data-v-66d89975] {
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    margin: auto;
    align-items: center;
    flex-wrap: wrap
}

.ability-star[data-v-66d89975] {
    flex: 0 0 50%;
    padding-left: 216px
}

.ability-star-download[data-v-66d89975] {
    text-decoration: none;
    width: 200px;
    height: 44px;
    opacity: 1;
    border-radius: 8px;
    background: rgb(0, 123, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    color: #fff
}

.ability[data-v-d1d35af3] {
    margin-bottom: 66px
}

.ability-content[data-v-d1d35af3] {
    display: flex;
    justify-content: space-around;
    width: 1200px;
    height: 112px;
    margin: auto;
    align-items: center;
    background-color: #f0f6fc;
    padding: 32px
}

.ability-list[data-v-d1d35af3] {
    flex: 0 0 50%;
    height: 100%;
    display: flex;
    margin: auto;
    align-items: center;
    flex-wrap: wrap
}

.wallpaper[data-v-4da74b9b] {
    text-align: center;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 66px
}

.wallpaper img[data-v-4da74b9b] {
    object-fit: fill
}

.wallpaper-list[data-v-4da74b9b] {
    overflow: hidden;
    width: 100%;
    min-width: 1280px
}

.wallpaper-list img[data-v-4da74b9b] {
    flex: 0;
    border-radius: 16px
}

.wallpaper-btn[data-v-4da74b9b] {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 64px;
    border-radius: 8px;
    background: rgb(0, 123, 255);
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
    opacity: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 64px;
    color: #fff;
    vertical-align: top;
    text-decoration: none
}

.wallpaperList img[data-v-4da74b9b] {
    border-radius: 16px;
    object-fit: fill
}

.wallpaperList-list[data-v-4da74b9b] {
    min-width: 1280px
}

.wallpaperDownload[data-v-4da74b9b] {
    position: relative;
    padding: 100px 200px 0;
    height: 360px;
    color: #fff;
    background-repeat: no-repeat;
    background-size: 100% 360px;
    margin-bottom: 300px
}

.wallpaperDownload-content[data-v-4da74b9b] {
    left: 200px;
    top: 284px;
    width: 1280px;
    height: 232px;
    opacity: 1;
    border-radius: 32px;
    background: rgb(255, 255, 255);
    border: 1px solid rgba(0, 0, 0, .05);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 60px;
    position: absolute;
    bottom: -83px
}

.novel[data-v-8061215b] {
    text-align: center;
    padding-left: 220px;
    padding-right: 220px;
    margin-bottom: 66px
}

.novel-category[data-v-8061215b] {
    margin-right: 32px
}

.novel-category[data-v-8061215b]:first-child {
    font-weight: 700
}

.novel-btn[data-v-8061215b] {
    display: inline-block;
    width: 320px;
    height: 56px;
    border-radius: 8px;
    background: rgb(0, 123, 255);
    justify-content: center;
    align-items: center;
    padding: 0 120px;
    opacity: 1;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 56px;
    color: #fff;
    text-align: left;
    vertical-align: top;
    text-decoration: none
}

.novel-list[data-v-8061215b] {
    overflow: hidden;
    width: 100%;
    text-align: left
}

.novel-list img[data-v-8061215b] {
    flex: 0
}

.download-page[data-v-db346915] {
    width: 100%;
    height: calc(100% - 72px);
    background: #eff3f6
}

.header[data-v-db346915] {
    min-width: 375px;
    box-sizing: content-box;
    height: 72px;
    opacity: 1;
    background: rgba(255, 255, 255, .5);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 354px 0 380px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000
}

.headerTitle[data-v-db346915] {
    width: 274px
}

.headerDownload[data-v-db346915] {
    width: 142px
}

.intro[data-v-db346915] {
    width: 100%;
    height: 240px;
    opacity: 1;
    background: rgba(255, 255, 255, .5);
    padding: 48px 0 32px;
    text-align: center
}

.introIcon[data-v-db346915] {
    width: 80px
}

.introTitle[data-v-db346915] {
    margin: 24px 0 12px;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #333
}

.download[data-v-db346915] {
    width: 1000px;
    margin: 0 auto 80px;
    height: 420px;
    opacity: 1;
    padding: 32px 0 0
}

.downloadIcon[data-v-db346915] {
    margin-bottom: 24px
}

.downloadBox[data-v-db346915] {
    display: flex;
    gap: 0 20px
}

.downloadBoxTop[data-v-db346915] {
    width: 272px;
    margin: 0 auto
}

.downloadBoxItem[data-v-db346915] {
    width: 320px;
    height: 340px;
    padding: 24px 10px 10px;
    opacity: 1;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 16px #00000014
}

.downloadBoxItemStep[data-v-db346915] {
    font-size: 14px;
    line-height: 16px;
    color: #333
}

.downloadBoxItemTitle[data-v-db346915] {
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #333;
    margin: 14px 0 16px
}

.downloadBoxItemDesc[data-v-db346915] {
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 28px;
    color: #333
}

.downloadBoxItemIcon[data-v-db346915] {
    margin: 0 auto;
    display: block;
    width: 300px
}

.footer[data-v-db346915] {
    margin: 80px auto 0;
    font-size: 12px;
    line-height: 24px;
    text-align: center;
    color: #9e9e9e
}

.footerBottom[data-v-db346915] {
    display: flex;
    align-items: center;
    justify-content: center
}

.footerPolice[data-v-db346915] {
    width: 20px;
    margin-right: 5px
}

.download-btn[data-v-88372a2f] {
    display: block;
    text-decoration: none;
    width: 200px;
    height: 52px;
    border-radius: 100px;
    background: linear-gradient(129deg, #1bed77 16%, #1bdd8a 42%, #1eca86 91%);
    box-shadow: 0 4px 15px #07cd5a45;
    font-size: 28px;
    line-height: 52px;
    text-align: center;
    color: #fff;
    cursor: pointer
}

.custom[data-v-88372a2f] {
    overflow: hidden
}

.banner[data-v-88372a2f] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #fff, rgba(210, 227, 252, .5))
}

.banner-shape1[data-v-88372a2f] {
    position: absolute;
    left: 150px;
    top: 354px;
    width: 160.48px;
    height: 160.48px;
    transform: rotate(-45deg);
    border: 2px solid #d2e3fc
}

.banner-shape2[data-v-88372a2f] {
    position: absolute;
    right: 12%;
    top: 403px;
    width: 75px;
    height: 75px;
    border-radius: 75px;
    background: #d2e3fc
}

.banner-shape3[data-v-88372a2f] {
    position: absolute;
    right: 10%;
    top: 378px;
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: #d2e3fc
}

.banner-shape4[data-v-88372a2f] {
    position: absolute;
    right: 0;
    top: 1px;
    width: 497px;
    height: 296px;
    background-image: url(https://p5.ssl.qhimg.com/t0184cc5860a2d5d960.png);
    background-size: 100% 100%
}

.banner-container[data-v-88372a2f] {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 1500px;
    height: 600px;
    text-align: center;
    margin: 63px auto 0;
    z-index: 1
}

.banner-img[data-v-88372a2f] {
    width: 731px;
    height: 441px
}

.banner-right[data-v-88372a2f] {
    width: 750px
}

.banner-logo[data-v-88372a2f] {
    width: 68px;
    height: 68px;
    vertical-align: middle
}

.banner-title[data-v-88372a2f] {
    margin-left: 12px;
    font-size: 48px;
    color: #3d3d3d;
    vertical-align: middle
}

.banner-slogan[data-v-88372a2f] {
    margin: 8px 0 37px;
    font-size: 40px;
    color: #3d3d3d
}

.banner-btn[data-v-88372a2f] {
    margin: 0 auto 24px
}

.banner p[data-v-88372a2f] {
    font-size: 14px;
    line-height: 28px;
    color: #767676
}

.banner[data-theme=v1][data-v-88372a2f] {
    background-repeat: no-repeat;
    background-size: 1920px 660px
}

@media screen and (min-width: 1860px) {
    .banner[data-theme=v1][data-v-88372a2f] {
        background-size: 100% auto
    }
}

.banner[data-theme=v1] .banner-container[data-v-88372a2f] {
    margin-top: 120px
}

.banner[data-theme=v1] .banner-right[data-v-88372a2f] {
    margin-top: 80px;
    padding-left: 29px
}

.banner[data-theme=v1] .banner-logo-title[data-v-88372a2f] {
    text-align: left
}

.banner[data-theme=v1] .banner-logo-title .banner-logo[data-v-88372a2f] {
    width: 64px;
    height: 64px
}

.banner[data-theme=v1] .banner-logo-title .banner-title[data-v-88372a2f] {
    color: inherit;
    height: 64px;
    opacity: 1;
    font-family: Microsoft YaHei;
    font-size: 48px;
    font-weight: 700;
    line-height: 64px;
    letter-spacing: 0em
}

.banner[data-theme=v1] .banner-slogan[data-v-88372a2f] {
    color: inherit;
    height: 32px;
    margin-bottom: 16px;
    margin-top: 21px;
    opacity: 1;
    font-family: Microsoft YaHei;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0em;
    text-align: left
}

.banner[data-theme=v1] .soft-info[data-v-88372a2f] {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: 350px
}

.banner[data-theme=v1] .soft-info p[data-v-88372a2f] {
    color: inherit;
    opacity: .8;
    width: 160px;
    text-align: left;
    overflow: hidden;
    height: 18px;
    margin-right: 10px;
    margin-bottom: 8px;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em
}

.banner[data-theme=v1] .banner-btn[data-v-88372a2f] {
    margin: 16px auto 16px 0
}

.banner[data-theme=v1] .theme-tip[data-v-88372a2f] {
    opacity: .8;
    color: inherit;
    text-align: left
}

.item[data-v-88372a2f] {
    display: flex;
    justify-content: space-between;
    width: 1400px;
    margin: 0 auto;
    padding: 110px 0
}

.item[data-v-88372a2f]:nth-child(odd) {
    flex-direction: row-reverse
}

.item[data-v-88372a2f]:nth-child(2n) {
    flex-direction: row
}

.item-con[data-v-88372a2f] {
    width: 600px
}

.item-title[data-v-88372a2f] {
    font-size: 52px;
    color: #3d3d3d
}

.item-desc[data-v-88372a2f] {
    font-size: 16px;
    color: #3d3d3d;
    margin: 24px 0 30px
}

.item img[data-v-88372a2f] {
    max-width: 776px
}

.header-noscoped {
    min-width: 60%;
    padding-left: 20%;
    padding-right: 20%;
    box-sizing: content-box;
    height: 72px;
    opacity: 1;
    background: rgb(255, 255, 255);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10000
}

.header-noscoped .download {
    min-width: 80px;
    height: 40px;
    opacity: 1;
    border-radius: 10px;
    background: rgb(0, 123, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24px;
    color: #fff
}

.active-underline {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translate(-50%);
    width: 75%;
    height: 3px;
    background-color: #15ca71
}

.page-banner[data-v-cb7297f5] {
    position: relative;
    width: 100%;
    height: 500px;
    margin-bottom: 60px;
    display: flex;
    padding: 90px 0;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.page-banner .banner-content[data-v-cb7297f5] {
    position: absolute;
    bottom: 32px;
    width: 500px;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    left: 55%;
    top: 20%
}

.page-banner .banner-content .banner-title[data-v-cb7297f5] {
    margin: 0;
    font-size: 37px;
    font-weight: 700
}

.page-banner .banner-content .banner-title b[data-v-cb7297f5] {
    font-weight: inherit
}

.page-banner .banner-content .down-text[data-v-cb7297f5] {
    font-size: 24px;
    color: #333;
    padding-bottom: 10px
}

.page-banner .banner-content .sub-title[data-v-cb7297f5] {
    font-size: 14px;
    color: #0054d1;
    padding-bottom: 10px
}

.page-banner .banner-content .ver-list[data-v-cb7297f5] {
    display: flex;
    width: 100%;
    color: #666;
    justify-content: space-between
}

.page-banner .banner-content .ver-list .ver-item[data-v-cb7297f5] {
    color: #111;
    font-size: 14px;
    padding-bottom: 10px
}

.page-banner .banner-content .ver-list .ver-item .ver-name[data-v-cb7297f5] {
    color: #666;
    font-size: 14px
}

.page-banner .banner-content .ver-list .ver-item .ver-content[data-v-cb7297f5] {
    color: #111
}

.page-banner .banner-content .download-btn[data-v-cb7297f5] {
    width: 200px;
    height: 48px;
    border-radius: 55px;
    line-height: 48px;
    text-align: center;
    background: #15CA71;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center
}

.page-banner .banner-content .prompt-text[data-v-cb7297f5] {
    font-size: 12px;
    color: #999;
    margin-top: 10px
}

.page-banner a[data-v-cb7297f5] {
    color: unset
}

.step[data-v-56199302] {
    margin-bottom: 66px
}

.container[data-v-56199302] {
    width: 1184px;
    margin: 20px auto
}

.header[data-v-56199302] {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.title[data-v-56199302] {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a
}

.app-grid[data-v-56199302] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
}

.app-item[data-v-56199302] {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 12px;
    padding-top: 12px;
    border-radius: 8px;
    transition: background .2s;
    cursor: pointer
}

.app-item[data-v-56199302]:hover {
    background: #f8f9fc
}

.app-icon[data-v-56199302] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-right: 12px;
    margin-left: 5px
}

.app-icon img[data-v-56199302] {
    width: 100%;
    height: 100%
}

.app-name[data-v-56199302] {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 2px;
    font-weight: 500;
    display: flex;
    flex-direction: column
}

.app-desc[data-v-56199302] {
    width: 100px;
    font-size: 12px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.install-btn[data-v-56199302] {
    text-decoration: none;
    position: absolute;
    right: 12px;
    top: 50%;
    background: #00CE68;
    color: #fff;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s;
    cursor: pointer;
    border: none;
    transform: translateY(-50%)
}

.app-item:hover .install-btn[data-v-56199302] {
    opacity: 1
}

.more[data-v-56199302] {
    color: #666;
    font-size: 14px;
    text-decoration: none
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    margin: .67em 0;
    font-size: 2em
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-size: 1em;
    font-family: monospace, monospace
}

a {
    background-color: transparent
}

abbr[title] {
    text-decoration: underline;
    text-decoration: underline dotted;
    border-bottom: none
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-size: 1em;
    font-family: monospace, monospace
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font-size: 100%;
    font-family: inherit;
    line-height: 1.15
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    padding: 0;
    border-style: none
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    display: table;
    box-sizing: border-box;
    max-width: 100%;
    padding: 0;
    color: inherit;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    outline-offset: -2px;
    -webkit-appearance: textfield
}

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

.arco-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: inherit;
    font-style: normal;
    vertical-align: -2px;
    outline: none;
    stroke: currentColor
}

.arco-icon-loading,
.arco-icon-spin {
    animation: arco-loading-circle 1s infinite cubic-bezier(0, 0, 1, 1)
}

@keyframes arco-loading-circle {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.arco-icon-hover {
    position: relative;
    display: inline-block;
    cursor: pointer;
    line-height: 12px
}

.arco-icon-hover .arco-icon {
    position: relative
}

.arco-icon-hover:before {
    position: absolute;
    display: block;
    box-sizing: border-box;
    background-color: transparent;
    border-radius: var(--border-radius-circle);
    transition: background-color .1s cubic-bezier(0, 0, 1, 1);
    content: ""
}

.arco-icon-hover:hover:before {
    background-color: var(--color-fill-2)
}

.arco-icon-hover.arco-icon-hover-disabled:before {
    opacity: 0
}

.arco-icon-hover:before {
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%)
}

.arco-icon-hover-size-mini {
    line-height: 12px
}

.arco-icon-hover-size-mini:before {
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%)
}

.arco-icon-hover-size-small {
    line-height: 12px
}

.arco-icon-hover-size-small:before {
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%)
}

.arco-icon-hover-size-large {
    line-height: 12px
}

.arco-icon-hover-size-large:before {
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%)
}

.arco-icon-hover-size-huge {
    line-height: 12px
}

.arco-icon-hover-size-huge:before {
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    transform: translate(-50%, -50%)
}

.fade-in-standard-enter-from,
.fade-in-standard-appear-from {
    opacity: 0
}

.fade-in-standard-enter-to,
.fade-in-standard-appear-to {
    opacity: 1
}

.fade-in-standard-enter-active,
.fade-in-standard-appear-active {
    transition: opacity .3s cubic-bezier(.34, .69, .1, 1)
}

.fade-in-standard-leave-from {
    opacity: 1
}

.fade-in-standard-leave-to {
    opacity: 0
}

.fade-in-standard-leave-active {
    transition: opacity .3s cubic-bezier(.34, .69, .1, 1)
}

.fade-in-enter-from,
.fade-in-appear-from {
    opacity: 0
}

.fade-in-enter-to,
.fade-in-appear-to {
    opacity: 1
}

.fade-in-enter-active,
.fade-in-appear-active {
    transition: opacity .1s cubic-bezier(0, 0, 1, 1)
}

.fade-in-leave-from {
    opacity: 1
}

.fade-in-leave-to {
    opacity: 0
}

.fade-in-leave-active {
    transition: opacity .1s cubic-bezier(0, 0, 1, 1)
}

.zoom-in-enter-from,
.zoom-in-appear-from {
    transform: scale(.5);
    opacity: 0
}

.zoom-in-enter-to,
.zoom-in-appear-to {
    transform: scale(1);
    opacity: 1
}

.zoom-in-enter-active,
.zoom-in-appear-active {
    transition: opacity .3s cubic-bezier(.34, .69, .1, 1), transform .3s cubic-bezier(.34, .69, .1, 1)
}

.zoom-in-leave-from {
    transform: scale(1);
    opacity: 1
}

.zoom-in-leave-to {
    transform: scale(.5);
    opacity: 0
}

.zoom-in-leave-active {
    transition: opacity .3s cubic-bezier(.34, .69, .1, 1), transform .3s cubic-bezier(.34, .69, .1, 1)
}

.zoom-in-fade-out-enter-from,
.zoom-in-fade-out-appear-from {
    transform: scale(.5);
    opacity: 0
}

.zoom-in-fade-out-enter-to,
.zoom-in-fade-out-appear-to {
    transform: scale(1);
    opacity: 1
}

.zoom-in-fade-out-enter-active,
.zoom-in-fade-out-appear-active {
    transition: opacity .3s cubic-bezier(.3, 1.3, .3, 1), transform .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-fade-out-leave-from {
    transform: scale(1);
    opacity: 1
}

.zoom-in-fade-out-leave-to {
    transform: scale(.5);
    opacity: 0
}

.zoom-in-fade-out-leave-active {
    transition: opacity .3s cubic-bezier(.3, 1.3, .3, 1), transform .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-big-enter-from,
.zoom-in-big-appear-from {
    transform: scale(.5);
    opacity: 0
}

.zoom-in-big-enter-to,
.zoom-in-big-appear-to {
    transform: scale(1);
    opacity: 1
}

.zoom-in-big-enter-active,
.zoom-in-big-appear-active {
    transition: opacity .2s cubic-bezier(0, 0, 1, 1), transform .2s cubic-bezier(0, 0, 1, 1)
}

.zoom-in-big-leave-from {
    transform: scale(1);
    opacity: 1
}

.zoom-in-big-leave-to {
    transform: scale(.2);
    opacity: 0
}

.zoom-in-big-leave-active {
    transition: opacity .2s cubic-bezier(0, 0, 1, 1), transform .2s cubic-bezier(0, 0, 1, 1)
}

.zoom-in-left-enter-from,
.zoom-in-left-appear-from {
    transform: scale(.1);
    opacity: .1
}

.zoom-in-left-enter-to,
.zoom-in-left-appear-to {
    transform: scale(1);
    opacity: 1
}

.zoom-in-left-enter-active,
.zoom-in-left-appear-active {
    transform-origin: 0 50%;
    transition: opacity .3s cubic-bezier(0, 0, 1, 1), transform .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-left-leave-from {
    transform: scale(1);
    opacity: 1
}

.zoom-in-left-leave-to {
    transform: scale(.1);
    opacity: .1
}

.zoom-in-left-leave-active {
    transform-origin: 0 50%;
    transition: opacity .3s cubic-bezier(0, 0, 1, 1), transform .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-top-enter-from,
.zoom-in-top-appear-from {
    transform: scaleY(.8) translateZ(0);
    opacity: 0
}

.zoom-in-top-enter-to,
.zoom-in-top-appear-to {
    transform: scaleY(1) translateZ(0);
    opacity: 1
}

.zoom-in-top-enter-active,
.zoom-in-top-appear-active {
    transform-origin: 0 0;
    transition: transform .3s cubic-bezier(.3, 1.3, .3, 1), opacity .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-top-leave-from {
    transform: scaleY(1) translateZ(0);
    opacity: 1
}

.zoom-in-top-leave-to {
    transform: scaleY(.8) translateZ(0);
    opacity: 0
}

.zoom-in-top-leave-active {
    transform-origin: 0 0;
    transition: transform .3s cubic-bezier(.3, 1.3, .3, 1), opacity .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-bottom-enter-from,
.zoom-in-bottom-appear-from {
    transform: scaleY(.8) translateZ(0);
    opacity: 0
}

.zoom-in-bottom-enter-to,
.zoom-in-bottom-appear-to {
    transform: scaleY(1) translateZ(0);
    opacity: 1
}

.zoom-in-bottom-enter-active,
.zoom-in-bottom-appear-active {
    transform-origin: 100% 100%;
    transition: transform .3s cubic-bezier(.3, 1.3, .3, 1), opacity .3s cubic-bezier(.3, 1.3, .3, 1)
}

.zoom-in-bottom-leave-from {
    transform: scaleY(1) translateZ(0);
    opacity: 1
}

.zoom-in-bottom-leave-to {
    transform: scaleY(.8) translateZ(0);
    opacity: 0
}

.zoom-in-bottom-leave-active {
    transform-origin: 100% 100%;
    transition: transform .3s cubic-bezier(.3, 1.3, .3, 1), opacity .3s cubic-bezier(.3, 1.3, .3, 1)
}

.slide-dynamic-origin-enter-from,
.slide-dynamic-origin-appear-from {
    transform: scaleY(.9);
    transform-origin: 0 0;
    opacity: 0
}

.slide-dynamic-origin-enter-to,
.slide-dynamic-origin-appear-to {
    transform: scaleY(1);
    transform-origin: 0 0;
    opacity: 1
}

.slide-dynamic-origin-enter-active,
.slide-dynamic-origin-appear-active {
    transition: transform .2s cubic-bezier(.34, .69, .1, 1), opacity .2s cubic-bezier(.34, .69, .1, 1)
}

.slide-dynamic-origin-leave-from {
    transform: scaleY(1);
    transform-origin: 0 0;
    opacity: 1
}

.slide-dynamic-origin-leave-to {
    transform: scaleY(.9);
    transform-origin: 0 0;
    opacity: 0
}

.slide-dynamic-origin-leave-active {
    transition: transform .2s cubic-bezier(.34, .69, .1, 1), opacity .2s cubic-bezier(.34, .69, .1, 1)
}

.slide-left-enter-from,
.slide-left-appear-from {
    transform: translate(-100%)
}

.slide-left-enter-to,
.slide-left-appear-to {
    transform: translate(0)
}

.slide-left-enter-active,
.slide-left-appear-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-left-leave-from {
    transform: translate(0)
}

.slide-left-leave-to {
    transform: translate(-100%)
}

.slide-left-leave-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-right-enter-from,
.slide-right-appear-from {
    transform: translate(100%)
}

.slide-right-enter-to,
.slide-right-appear-to {
    transform: translate(0)
}

.slide-right-enter-active,
.slide-right-appear-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-right-leave-from {
    transform: translate(0)
}

.slide-right-leave-to {
    transform: translate(100%)
}

.slide-right-leave-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-top-enter-from,
.slide-top-appear-from {
    transform: translateY(-100%)
}

.slide-top-enter-to,
.slide-top-appear-to {
    transform: translateY(0)
}

.slide-top-enter-active,
.slide-top-appear-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-top-leave-from {
    transform: translateY(0)
}

.slide-top-leave-to {
    transform: translateY(-100%)
}

.slide-top-leave-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-bottom-enter-from,
.slide-bottom-appear-from {
    transform: translateY(100%)
}

.slide-bottom-enter-to,
.slide-bottom-appear-to {
    transform: translateY(0)
}

.slide-bottom-enter-active,
.slide-bottom-appear-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

.slide-bottom-leave-from {
    transform: translateY(0)
}

.slide-bottom-leave-to {
    transform: translateY(100%)
}

.slide-bottom-leave-active {
    transition: transform .3s cubic-bezier(.34, .69, .1, 1)
}

body {
    --red-1: 255, 236, 232;
    --red-2: 253, 205, 197;
    --red-3: 251, 172, 163;
    --red-4: 249, 137, 129;
    --red-5: 247, 101, 96;
    --red-6: 245, 63, 63;
    --red-7: 203, 39, 45;
    --red-8: 161, 21, 30;
    --red-9: 119, 8, 19;
    --red-10: 77, 0, 10;
    --orangered-1: 255, 243, 232;
    --orangered-2: 253, 221, 195;
    --orangered-3: 252, 197, 159;
    --orangered-4: 250, 172, 123;
    --orangered-5: 249, 144, 87;
    --orangered-6: 247, 114, 52;
    --orangered-7: 204, 81, 32;
    --orangered-8: 162, 53, 17;
    --orangered-9: 119, 31, 6;
    --orangered-10: 77, 14, 0;
    --orange-1: 255, 247, 232;
    --orange-2: 255, 228, 186;
    --orange-3: 255, 207, 139;
    --orange-4: 255, 182, 93;
    --orange-5: 255, 154, 46;
    --orange-6: 255, 125, 0;
    --orange-7: 210, 95, 0;
    --orange-8: 166, 69, 0;
    --orange-9: 121, 46, 0;
    --orange-10: 77, 27, 0;
    --gold-1: 255, 252, 232;
    --gold-2: 253, 244, 191;
    --gold-3: 252, 233, 150;
    --gold-4: 250, 220, 109;
    --gold-5: 249, 204, 69;
    --gold-6: 247, 186, 30;
    --gold-7: 204, 146, 19;
    --gold-8: 162, 109, 10;
    --gold-9: 119, 75, 4;
    --gold-10: 77, 45, 0;
    --yellow-1: 254, 255, 232;
    --yellow-2: 254, 254, 190;
    --yellow-3: 253, 250, 148;
    --yellow-4: 252, 242, 107;
    --yellow-5: 251, 232, 66;
    --yellow-6: 250, 220, 25;
    --yellow-7: 207, 175, 15;
    --yellow-8: 163, 132, 8;
    --yellow-9: 120, 93, 3;
    --yellow-10: 77, 56, 0;
    --lime-1: 252, 255, 232;
    --lime-2: 237, 248, 187;
    --lime-3: 220, 241, 144;
    --lime-4: 201, 233, 104;
    --lime-5: 181, 226, 65;
    --lime-6: 159, 219, 29;
    --lime-7: 126, 183, 18;
    --lime-8: 95, 148, 10;
    --lime-9: 67, 112, 4;
    --lime-10: 42, 77, 0;
    --green-1: 232, 255, 234;
    --green-2: 175, 240, 181;
    --green-3: 123, 225, 136;
    --green-4: 76, 210, 99;
    --green-5: 35, 195, 67;
    --green-6: 0, 180, 42;
    --green-7: 0, 154, 41;
    --green-8: 0, 128, 38;
    --green-9: 0, 102, 34;
    --green-10: 0, 77, 28;
    --cyan-1: 232, 255, 251;
    --cyan-2: 183, 244, 236;
    --cyan-3: 137, 233, 224;
    --cyan-4: 94, 223, 214;
    --cyan-5: 55, 212, 207;
    --cyan-6: 20, 201, 201;
    --cyan-7: 13, 165, 170;
    --cyan-8: 7, 130, 139;
    --cyan-9: 3, 97, 108;
    --cyan-10: 0, 66, 77;
    --blue-1: 232, 247, 255;
    --blue-2: 195, 231, 254;
    --blue-3: 159, 212, 253;
    --blue-4: 123, 192, 252;
    --blue-5: 87, 169, 251;
    --blue-6: 52, 145, 250;
    --blue-7: 32, 108, 207;
    --blue-8: 17, 75, 163;
    --blue-9: 6, 48, 120;
    --blue-10: 0, 26, 77;
    --arcoblue-1: 232, 243, 255;
    --arcoblue-2: 190, 218, 255;
    --arcoblue-3: 148, 191, 255;
    --arcoblue-4: 106, 161, 255;
    --arcoblue-5: 64, 128, 255;
    --arcoblue-6: 22, 93, 255;
    --arcoblue-7: 14, 66, 210;
    --arcoblue-8: 7, 44, 166;
    --arcoblue-9: 3, 26, 121;
    --arcoblue-10: 0, 13, 77;
    --purple-1: 245, 232, 255;
    --purple-2: 221, 190, 246;
    --purple-3: 195, 150, 237;
    --purple-4: 168, 113, 227;
    --purple-5: 141, 78, 218;
    --purple-6: 114, 46, 209;
    --purple-7: 85, 29, 176;
    --purple-8: 60, 16, 143;
    --purple-9: 39, 6, 110;
    --purple-10: 22, 0, 77;
    --pinkpurple-1: 255, 232, 251;
    --pinkpurple-2: 247, 186, 239;
    --pinkpurple-3: 240, 142, 230;
    --pinkpurple-4: 232, 101, 223;
    --pinkpurple-5: 225, 62, 219;
    --pinkpurple-6: 217, 26, 217;
    --pinkpurple-7: 176, 16, 182;
    --pinkpurple-8: 138, 9, 147;
    --pinkpurple-9: 101, 3, 112;
    --pinkpurple-10: 66, 0, 77;
    --magenta-1: 255, 232, 241;
    --magenta-2: 253, 194, 219;
    --magenta-3: 251, 157, 199;
    --magenta-4: 249, 121, 183;
    --magenta-5: 247, 84, 168;
    --magenta-6: 245, 49, 157;
    --magenta-7: 203, 30, 131;
    --magenta-8: 161, 16, 105;
    --magenta-9: 119, 6, 79;
    --magenta-10: 77, 0, 52;
    --gray-1: 247, 248, 250;
    --gray-2: 242, 243, 245;
    --gray-3: 229, 230, 235;
    --gray-4: 201, 205, 212;
    --gray-5: 169, 174, 184;
    --gray-6: 134, 144, 156;
    --gray-7: 107, 119, 133;
    --gray-8: 78, 89, 105;
    --gray-9: 39, 46, 59;
    --gray-10: 29, 33, 41;
    --success-1: var(--green-1);
    --success-2: var(--green-2);
    --success-3: var(--green-3);
    --success-4: var(--green-4);
    --success-5: var(--green-5);
    --success-6: var(--green-6);
    --success-7: var(--green-7);
    --success-8: var(--green-8);
    --success-9: var(--green-9);
    --success-10: var(--green-10);
    --primary-1: var(--arcoblue-1);
    --primary-2: var(--arcoblue-2);
    --primary-3: var(--arcoblue-3);
    --primary-4: var(--arcoblue-4);
    --primary-5: var(--arcoblue-5);
    --primary-6: var(--arcoblue-6);
    --primary-7: var(--arcoblue-7);
    --primary-8: var(--arcoblue-8);
    --primary-9: var(--arcoblue-9);
    --primary-10: var(--arcoblue-10);
    --danger-1: var(--red-1);
    --danger-2: var(--red-2);
    --danger-3: var(--red-3);
    --danger-4: var(--red-4);
    --danger-5: var(--red-5);
    --danger-6: var(--red-6);
    --danger-7: var(--red-7);
    --danger-8: var(--red-8);
    --danger-9: var(--red-9);
    --danger-10: var(--red-10);
    --warning-1: var(--orange-1);
    --warning-2: var(--orange-2);
    --warning-3: var(--orange-3);
    --warning-4: var(--orange-4);
    --warning-5: var(--orange-5);
    --warning-6: var(--orange-6);
    --warning-7: var(--orange-7);
    --warning-8: var(--orange-8);
    --warning-9: var(--orange-9);
    --warning-10: var(--orange-10);
    --link-1: var(--arcoblue-1);
    --link-2: var(--arcoblue-2);
    --link-3: var(--arcoblue-3);
    --link-4: var(--arcoblue-4);
    --link-5: var(--arcoblue-5);
    --link-6: var(--arcoblue-6);
    --link-7: var(--arcoblue-7);
    --link-8: var(--arcoblue-8);
    --link-9: var(--arcoblue-9);
    --link-10: var(--arcoblue-10)
}

body[arco-theme=dark] {
    --red-1: 77, 0, 10;
    --red-2: 119, 6, 17;
    --red-3: 161, 22, 31;
    --red-4: 203, 46, 52;
    --red-5: 245, 78, 78;
    --red-6: 247, 105, 101;
    --red-7: 249, 141, 134;
    --red-8: 251, 176, 167;
    --red-9: 253, 209, 202;
    --red-10: 255, 240, 236;
    --orangered-1: 77, 14, 0;
    --orangered-2: 119, 30, 5;
    --orangered-3: 162, 55, 20;
    --orangered-4: 204, 87, 41;
    --orangered-5: 247, 126, 69;
    --orangered-6: 249, 146, 90;
    --orangered-7: 250, 173, 125;
    --orangered-8: 252, 198, 161;
    --orangered-9: 253, 222, 197;
    --orangered-10: 255, 244, 235;
    --orange-1: 77, 27, 0;
    --orange-2: 121, 48, 4;
    --orange-3: 166, 75, 10;
    --orange-4: 210, 105, 19;
    --orange-5: 255, 141, 31;
    --orange-6: 255, 150, 38;
    --orange-7: 255, 179, 87;
    --orange-8: 255, 205, 135;
    --orange-9: 255, 227, 184;
    --orange-10: 255, 247, 232;
    --gold-1: 77, 45, 0;
    --gold-2: 119, 75, 4;
    --gold-3: 162, 111, 15;
    --gold-4: 204, 150, 31;
    --gold-5: 247, 192, 52;
    --gold-6: 249, 204, 68;
    --gold-7: 250, 220, 108;
    --gold-8: 252, 233, 149;
    --gold-9: 253, 244, 190;
    --gold-10: 255, 252, 232;
    --yellow-1: 77, 56, 0;
    --yellow-2: 120, 94, 7;
    --yellow-3: 163, 134, 20;
    --yellow-4: 207, 179, 37;
    --yellow-5: 250, 225, 60;
    --yellow-6: 251, 233, 75;
    --yellow-7: 252, 243, 116;
    --yellow-8: 253, 250, 157;
    --yellow-9: 254, 254, 198;
    --yellow-10: 254, 255, 240;
    --lime-1: 42, 77, 0;
    --lime-2: 68, 112, 6;
    --lime-3: 98, 148, 18;
    --lime-4: 132, 183, 35;
    --lime-5: 168, 219, 57;
    --lime-6: 184, 226, 75;
    --lime-7: 203, 233, 112;
    --lime-8: 222, 241, 152;
    --lime-9: 238, 248, 194;
    --lime-10: 253, 255, 238;
    --green-1: 0, 77, 28;
    --green-2: 4, 102, 37;
    --green-3: 10, 128, 45;
    --green-4: 18, 154, 55;
    --green-5: 29, 180, 64;
    --green-6: 39, 195, 70;
    --green-7: 80, 210, 102;
    --green-8: 126, 225, 139;
    --green-9: 178, 240, 183;
    --green-10: 235, 255, 236;
    --cyan-1: 0, 66, 77;
    --cyan-2: 6, 97, 108;
    --cyan-3: 17, 131, 139;
    --cyan-4: 31, 166, 170;
    --cyan-5: 48, 201, 201;
    --cyan-6: 63, 212, 207;
    --cyan-7: 102, 223, 215;
    --cyan-8: 144, 233, 225;
    --cyan-9: 190, 244, 237;
    --cyan-10: 240, 255, 252;
    --blue-1: 0, 26, 77;
    --blue-2: 5, 47, 120;
    --blue-3: 19, 76, 163;
    --blue-4: 41, 113, 207;
    --blue-5: 70, 154, 250;
    --blue-6: 90, 170, 251;
    --blue-7: 125, 193, 252;
    --blue-8: 161, 213, 253;
    --blue-9: 198, 232, 254;
    --blue-10: 234, 248, 255;
    --arcoblue-1: 0, 13, 77;
    --arcoblue-2: 4, 27, 121;
    --arcoblue-3: 14, 50, 166;
    --arcoblue-4: 29, 77, 210;
    --arcoblue-5: 48, 111, 255;
    --arcoblue-6: 60, 126, 255;
    --arcoblue-7: 104, 159, 255;
    --arcoblue-8: 147, 190, 255;
    --arcoblue-9: 190, 218, 255;
    --arcoblue-10: 234, 244, 255;
    --purple-1: 22, 0, 77;
    --purple-2: 39, 6, 110;
    --purple-3: 62, 19, 143;
    --purple-4: 90, 37, 176;
    --purple-5: 123, 61, 209;
    --purple-6: 142, 81, 218;
    --purple-7: 169, 116, 227;
    --purple-8: 197, 154, 237;
    --purple-9: 223, 194, 246;
    --purple-10: 247, 237, 255;
    --pinkpurple-1: 66, 0, 77;
    --pinkpurple-2: 101, 3, 112;
    --pinkpurple-3: 138, 13, 147;
    --pinkpurple-4: 176, 27, 182;
    --pinkpurple-5: 217, 46, 217;
    --pinkpurple-6: 225, 61, 219;
    --pinkpurple-7: 232, 102, 223;
    --pinkpurple-8: 240, 146, 230;
    --pinkpurple-9: 247, 193, 240;
    --pinkpurple-10: 255, 242, 253;
    --magenta-1: 77, 0, 52;
    --magenta-2: 119, 8, 80;
    --magenta-3: 161, 23, 108;
    --magenta-4: 203, 43, 136;
    --magenta-5: 245, 69, 166;
    --magenta-6: 247, 86, 169;
    --magenta-7: 249, 122, 184;
    --magenta-8: 251, 158, 200;
    --magenta-9: 253, 195, 219;
    --magenta-10: 255, 232, 241;
    --gray-1: 23, 23, 26;
    --gray-2: 46, 46, 48;
    --gray-3: 72, 72, 73;
    --gray-4: 95, 95, 96;
    --gray-5: 120, 120, 122;
    --gray-6: 146, 146, 147;
    --gray-7: 171, 171, 172;
    --gray-8: 197, 197, 197;
    --gray-9: 223, 223, 223;
    --gray-10: 246, 246, 246;
    --primary-1: var(--arcoblue-1);
    --primary-2: var(--arcoblue-2);
    --primary-3: var(--arcoblue-3);
    --primary-4: var(--arcoblue-4);
    --primary-5: var(--arcoblue-5);
    --primary-6: var(--arcoblue-6);
    --primary-7: var(--arcoblue-7);
    --primary-8: var(--arcoblue-8);
    --primary-9: var(--arcoblue-9);
    --primary-10: var(--arcoblue-10);
    --success-1: var(--green-1);
    --success-2: var(--green-2);
    --success-3: var(--green-3);
    --success-4: var(--green-4);
    --success-5: var(--green-5);
    --success-6: var(--green-6);
    --success-7: var(--green-7);
    --success-8: var(--green-8);
    --success-9: var(--green-9);
    --success-10: var(--green-10);
    --danger-1: var(--red-1);
    --danger-2: var(--red-2);
    --danger-3: var(--red-3);
    --danger-4: var(--red-4);
    --danger-5: var(--red-5);
    --danger-6: var(--red-6);
    --danger-7: var(--red-7);
    --danger-8: var(--red-8);
    --danger-9: var(--red-9);
    --danger-10: var(--red-10);
    --warning-1: var(--orange-1);
    --warning-2: var(--orange-2);
    --warning-3: var(--orange-3);
    --warning-4: var(--orange-4);
    --warning-5: var(--orange-5);
    --warning-6: var(--orange-6);
    --warning-7: var(--orange-7);
    --warning-8: var(--orange-8);
    --warning-9: var(--orange-9);
    --warning-10: var(--orange-10);
    --link-1: var(--arcoblue-1);
    --link-2: var(--arcoblue-2);
    --link-3: var(--arcoblue-3);
    --link-4: var(--arcoblue-4);
    --link-5: var(--arcoblue-5);
    --link-6: var(--arcoblue-6);
    --link-7: var(--arcoblue-7);
    --link-8: var(--arcoblue-8);
    --link-9: var(--arcoblue-9);
    --link-10: var(--arcoblue-10)
}

body {
    --color-white: #ffffff;
    --color-black: #000000;
    --color-border: rgb(var(--gray-3));
    --color-bg-popup: var(--color-bg-5);
    --color-bg-1: #fff;
    --color-bg-2: #fff;
    --color-bg-3: #fff;
    --color-bg-4: #fff;
    --color-bg-5: #fff;
    --color-bg-white: #fff;
    --color-neutral-1: rgb(var(--gray-1));
    --color-neutral-2: rgb(var(--gray-2));
    --color-neutral-3: rgb(var(--gray-3));
    --color-neutral-4: rgb(var(--gray-4));
    --color-neutral-5: rgb(var(--gray-5));
    --color-neutral-6: rgb(var(--gray-6));
    --color-neutral-7: rgb(var(--gray-7));
    --color-neutral-8: rgb(var(--gray-8));
    --color-neutral-9: rgb(var(--gray-9));
    --color-neutral-10: rgb(var(--gray-10));
    --color-text-1: var(--color-neutral-10);
    --color-text-2: var(--color-neutral-8);
    --color-text-3: var(--color-neutral-6);
    --color-text-4: var(--color-neutral-4);
    --color-border-1: var(--color-neutral-2);
    --color-border-2: var(--color-neutral-3);
    --color-border-3: var(--color-neutral-4);
    --color-border-4: var(--color-neutral-6);
    --color-fill-1: var(--color-neutral-1);
    --color-fill-2: var(--color-neutral-2);
    --color-fill-3: var(--color-neutral-3);
    --color-fill-4: var(--color-neutral-4);
    --color-primary-light-1: rgb(var(--primary-1));
    --color-primary-light-2: rgb(var(--primary-2));
    --color-primary-light-3: rgb(var(--primary-3));
    --color-primary-light-4: rgb(var(--primary-4));
    --color-link-light-1: rgb(var(--link-1));
    --color-link-light-2: rgb(var(--link-2));
    --color-link-light-3: rgb(var(--link-3));
    --color-link-light-4: rgb(var(--link-4));
    --color-secondary: var(--color-neutral-2);
    --color-secondary-hover: var(--color-neutral-3);
    --color-secondary-active: var(--color-neutral-4);
    --color-secondary-disabled: var(--color-neutral-1);
    --color-danger-light-1: rgb(var(--danger-1));
    --color-danger-light-2: rgb(var(--danger-2));
    --color-danger-light-3: rgb(var(--danger-3));
    --color-danger-light-4: rgb(var(--danger-4));
    --color-success-light-1: rgb(var(--success-1));
    --color-success-light-2: rgb(var(--success-2));
    --color-success-light-3: rgb(var(--success-3));
    --color-success-light-4: rgb(var(--success-4));
    --color-warning-light-1: rgb(var(--warning-1));
    --color-warning-light-2: rgb(var(--warning-2));
    --color-warning-light-3: rgb(var(--warning-3));
    --color-warning-light-4: rgb(var(--warning-4));
    --border-radius-none: 0;
    --border-radius-small: 2px;
    --border-radius-medium: 4px;
    --border-radius-large: 8px;
    --border-radius-circle: 50%;
    --color-tooltip-bg: rgb(var(--gray-10));
    --color-spin-layer-bg: rgba(255, 255, 255, .6);
    --color-menu-dark-bg: #232324;
    --color-menu-light-bg: #ffffff;
    --color-menu-dark-hover: rgba(255, 255, 255, .04);
    --color-mask-bg: rgba(29, 33, 41, .6)
}

body[arco-theme=dark] {
    --color-white: rgba(255, 255, 255, .9);
    --color-black: #000000;
    --color-border: #333335;
    --color-bg-1: #17171a;
    --color-bg-2: #232324;
    --color-bg-3: #2a2a2b;
    --color-bg-4: #313132;
    --color-bg-5: #373739;
    --color-bg-white: #f6f6f6;
    --color-text-1: rgba(255, 255, 255, .9);
    --color-text-2: rgba(255, 255, 255, .7);
    --color-text-3: rgba(255, 255, 255, .5);
    --color-text-4: rgba(255, 255, 255, .3);
    --color-fill-1: rgba(255, 255, 255, .04);
    --color-fill-2: rgba(255, 255, 255, .08);
    --color-fill-3: rgba(255, 255, 255, .12);
    --color-fill-4: rgba(255, 255, 255, .16);
    --color-primary-light-1: rgba(var(--primary-6), .2);
    --color-primary-light-2: rgba(var(--primary-6), .35);
    --color-primary-light-3: rgba(var(--primary-6), .5);
    --color-primary-light-4: rgba(var(--primary-6), .65);
    --color-secondary: rgba(var(--gray-9), .08);
    --color-secondary-hover: rgba(var(--gray-8), .16);
    --color-secondary-active: rgba(var(--gray-7), .24);
    --color-secondary-disabled: rgba(var(--gray-9), .08);
    --color-danger-light-1: rgba(var(--danger-6), .2);
    --color-danger-light-2: rgba(var(--danger-6), .35);
    --color-danger-light-3: rgba(var(--danger-6), .5);
    --color-danger-light-4: rgba(var(--danger-6), .65);
    --color-success-light-1: rgb(var(--success-6), .2);
    --color-success-light-2: rgb(var(--success-6), .35);
    --color-success-light-3: rgb(var(--success-6), .5);
    --color-success-light-4: rgb(var(--success-6), .65);
    --color-warning-light-1: rgb(var(--warning-6), .2);
    --color-warning-light-2: rgb(var(--warning-6), .35);
    --color-warning-light-3: rgb(var(--warning-6), .5);
    --color-warning-light-4: rgb(var(--warning-6), .65);
    --color-link-light-1: rgb(var(--link-6), .2);
    --color-link-light-2: rgb(var(--link-6), .35);
    --color-link-light-3: rgb(var(--link-6), .5);
    --color-link-light-4: rgb(var(--link-6), .65);
    --color-tooltip-bg: #373739;
    --color-spin-layer-bg: rgba(51, 51, 51, .6);
    --color-menu-dark-bg: #232324;
    --color-menu-light-bg: #232324;
    --color-menu-dark-hover: var(--color-fill-2);
    --color-mask-bg: rgba(23, 23, 26, .6)
}

body {
    font-size: 14px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, PingFang SC, Hiragino Sans GB, noto sans, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif
}

@keyframes arco-carousel-slide-x-in {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes arco-carousel-slide-x-out {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-100%)
    }
}

@keyframes arco-carousel-slide-x-in-reverse {
    0% {
        transform: translate(-100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes arco-carousel-slide-x-out-reverse {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(100%)
    }
}

@keyframes arco-carousel-slide-y-in {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes arco-carousel-slide-y-out {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-100%)
    }
}

@keyframes arco-carousel-slide-y-in-reverse {
    0% {
        transform: translateY(-100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes arco-carousel-slide-y-out-reverse {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(100%)
    }
}

@keyframes arco-carousel-card-bottom-to-middle {
    0% {
        transform: translate(0) translateZ(-400px);
        opacity: 0
    }

    to {
        transform: translate(0) translateZ(-200px);
        opacity: .4
    }
}

@keyframes arco-carousel-card-middle-to-bottom {
    0% {
        transform: translate(-100%) translateZ(-200px);
        opacity: .4
    }

    to {
        transform: translate(-100%) translateZ(-400px);
        opacity: 0
    }
}

@keyframes arco-carousel-card-top-to-middle {
    0% {
        transform: translate(-50%) translateZ(0);
        opacity: 1
    }

    to {
        transform: translate(-100%) translateZ(-200px);
        opacity: .4
    }
}

@keyframes arco-carousel-card-middle-to-top {
    0% {
        transform: translate(0) translateZ(-200px);
        opacity: .4
    }

    to {
        transform: translate(-50%) translateZ(0);
        opacity: 1
    }
}

@keyframes arco-carousel-card-bottom-to-middle-reverse {
    0% {
        transform: translate(-100%) translateZ(-400px);
        opacity: 0
    }

    to {
        transform: translate(-100%) translateZ(-200px);
        opacity: .4
    }
}

@keyframes arco-carousel-card-middle-to-bottom-reverse {
    0% {
        transform: translate(0) translateZ(-200px);
        opacity: .4
    }

    to {
        transform: translate(0) translateZ(-400px);
        opacity: 0
    }
}

@keyframes arco-carousel-card-top-to-middle-reverse {
    0% {
        transform: translate(-50%) translateZ(0);
        opacity: 1
    }

    to {
        transform: translate(0) translateZ(-200px);
        opacity: .4
    }
}

@keyframes arco-carousel-card-middle-to-top-reverse {
    0% {
        transform: translate(-100%) translateZ(-200px);
        opacity: .4
    }

    to {
        transform: translate(-50%) translateZ(0);
        opacity: 1
    }
}

.arco-carousel {
    position: relative
}

.arco-carousel-indicator-position-outer {
    margin-bottom: 30px
}

.arco-carousel-slide,
.arco-carousel-card,
.arco-carousel-fade {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.arco-carousel-slide>*,
.arco-carousel-card>*,
.arco-carousel-fade>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.arco-carousel-item-current {
    z-index: 1
}

.arco-carousel-slide>*:not(.arco-carousel-item-current) {
    display: none;
    visibility: hidden
}

.arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-out {
    display: block;
    animation: arco-carousel-slide-x-out
}

.arco-carousel-slide.arco-carousel-horizontal .arco-carousel-item-slide-in {
    display: block;
    animation: arco-carousel-slide-x-in
}

.arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-out {
    animation: arco-carousel-slide-x-out-reverse
}

.arco-carousel-slide.arco-carousel-horizontal.arco-carousel-negative .arco-carousel-item-slide-in {
    animation: arco-carousel-slide-x-in-reverse
}

.arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-out {
    display: block;
    animation: arco-carousel-slide-y-out
}

.arco-carousel-slide.arco-carousel-vertical .arco-carousel-item-slide-in {
    display: block;
    animation: arco-carousel-slide-y-in
}

.arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-out {
    animation: arco-carousel-slide-y-out-reverse
}

.arco-carousel-slide.arco-carousel-vertical.arco-carousel-negative .arco-carousel-item-slide-in {
    animation: arco-carousel-slide-y-in-reverse
}

.arco-carousel-card {
    perspective: 800px
}

.arco-carousel-card>* {
    left: 50%;
    transform: translate(-50%) translateZ(-400px);
    opacity: 0;
    animation: arco-carousel-card-middle-to-bottom
}

.arco-carousel-card .arco-carousel-item-prev {
    transform: translate(-100%) translateZ(-200px);
    opacity: .4;
    animation: arco-carousel-card-top-to-middle
}

.arco-carousel-card .arco-carousel-item-next {
    transform: translate(0) translateZ(-200px);
    opacity: .4;
    animation: arco-carousel-card-bottom-to-middle
}

.arco-carousel-card .arco-carousel-item-current {
    transform: translate(-50%) translateZ(0);
    opacity: 1;
    animation: arco-carousel-card-middle-to-top
}

.arco-carousel-card.arco-carousel-negative>* {
    animation: arco-carousel-card-middle-to-bottom-reverse
}

.arco-carousel-card.arco-carousel-negative .arco-carousel-item-prev {
    animation: arco-carousel-card-bottom-to-middle-reverse
}

.arco-carousel-card.arco-carousel-negative .arco-carousel-item-next {
    animation: arco-carousel-card-top-to-middle-reverse
}

.arco-carousel-card.arco-carousel-negative .arco-carousel-item-current {
    animation: arco-carousel-card-middle-to-top-reverse
}

.arco-carousel-fade>* {
    left: 50%;
    transform: translate(-50%);
    opacity: 0
}

.arco-carousel-fade .arco-carousel-item-current {
    opacity: 1
}

.arco-carousel-indicator {
    position: absolute;
    display: flex;
    margin: 0;
    padding: 0
}

.arco-carousel-indicator-wrapper {
    position: absolute;
    z-index: 2
}

.arco-carousel-indicator-wrapper-top {
    top: 0;
    right: 0;
    left: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 87%)
}

.arco-carousel-indicator-wrapper-bottom {
    right: 0;
    bottom: 0;
    left: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, .15) 100%)
}

.arco-carousel-indicator-wrapper-left {
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, 0) 87%)
}

.arco-carousel-indicator-wrapper-right {
    top: 0;
    right: 0;
    width: 48px;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 13%, rgba(0, 0, 0, .15) 100%)
}

.arco-carousel-indicator-wrapper-outer {
    right: 0;
    left: 0;
    background: none
}

.arco-carousel-indicator-bottom {
    bottom: 12px;
    left: 50%;
    transform: translate(-50%)
}

.arco-carousel-indicator-top {
    top: 12px;
    left: 50%;
    transform: translate(-50%)
}

.arco-carousel-indicator-left {
    top: 50%;
    left: 12px;
    transform: translate(-50%, -50%) rotate(90deg)
}

.arco-carousel-indicator-right {
    top: 50%;
    right: 12px;
    transform: translate(50%, -50%) rotate(90deg)
}

.arco-carousel-indicator-outer {
    left: 50%;
    padding: 4px;
    background-color: transparent;
    border-radius: 20px;
    transform: translate(-50%)
}

.arco-carousel-indicator-outer.arco-carousel-indicator-dot {
    bottom: -22px
}

.arco-carousel-indicator-outer.arco-carousel-indicator-line {
    bottom: -20px
}

.arco-carousel-indicator-outer.arco-carousel-indicator-slider {
    bottom: -16px;
    padding: 0;
    background-color: rgba(var(--gray-4), .5)
}

.arco-carousel-indicator-outer .arco-carousel-indicator-item {
    background-color: rgba(var(--gray-4), .5)
}

.arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,
.arco-carousel-indicator-outer .arco-carousel-indicator-item-active {
    background-color: var(--color-fill-4)
}

.arco-carousel-indicator-item {
    display: inline-block;
    background-color: #ffffff4d;
    border-radius: var(--border-radius-medium);
    cursor: pointer
}

.arco-carousel-indicator-item:hover,
.arco-carousel-indicator-item-active {
    background-color: var(--color-white)
}

.arco-carousel-indicator-dot .arco-carousel-indicator-item {
    width: 6px;
    height: 6px;
    border-radius: 50%
}

.arco-carousel-indicator-dot .arco-carousel-indicator-item:not(:last-child) {
    margin-right: 8px
}

.arco-carousel-indicator-line .arco-carousel-indicator-item {
    width: 12px;
    height: 4px
}

.arco-carousel-indicator-line .arco-carousel-indicator-item:not(:last-child) {
    margin-right: 8px
}

.arco-carousel-indicator-slider {
    width: 48px;
    height: 4px;
    background-color: #ffffff4d;
    border-radius: var(--border-radius-medium);
    cursor: pointer
}

.arco-carousel-indicator-slider .arco-carousel-indicator-item {
    position: absolute;
    top: 0;
    height: 100%;
    transition: left .3s
}

.arco-carousel-arrow>div {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--color-white);
    background-color: #ffffff4d;
    border-radius: 50%;
    cursor: pointer
}

.arco-carousel-arrow>div>svg {
    color: var(--color-white);
    font-size: 14px
}

.arco-carousel-arrow>div:hover {
    background-color: #ffffff80
}

.arco-carousel-arrow-left {
    top: 50%;
    left: 12px;
    transform: translateY(-50%)
}

.arco-carousel-arrow-right {
    top: 50%;
    right: 12px;
    transform: translateY(-50%)
}

.arco-carousel-arrow-top {
    top: 12px;
    left: 50%;
    transform: translate(-50%)
}

.arco-carousel-arrow-bottom {
    bottom: 12px;
    left: 50%;
    transform: translate(-50%)
}

.arco-carousel-arrow-hover div {
    opacity: 0;
    transition: all .3s
}

.arco-carousel:hover .arco-carousel-arrow-hover div {
    opacity: 1
}

body[arco-theme=dark] .arco-carousel-arrow>div {
    background-color: #17171a4d
}

body[arco-theme=dark] .arco-carousel-arrow>div:hover {
    background-color: #17171a80
}

body[arco-theme=dark] .arco-carousel-indicator-item,
body[arco-theme=dark] .arco-carousel-indicator-slider {
    background-color: #17171a4d
}

body[arco-theme=dark] .arco-carousel-indicator-item-active,
body[arco-theme=dark] .arco-carousel-indicator-item:hover {
    background-color: var(--color-white)
}

body[arco-theme=dark] .arco-carousel-indicator-outer.arco-carousel-indicator-slider {
    background-color: rgba(var(--gray-4), .5)
}

body[arco-theme=dark] .arco-carousel-indicator-outer .arco-carousel-indicator-item:hover,
body[arco-theme=dark] .arco-carousel-indicator-outer .arco-carousel-indicator-item-active {
    background-color: var(--color-fill-4)
}

.step[data-v-cdea53b7] {
    margin-bottom: 66px
}

.step .step-title .section-title[data-v-cdea53b7] {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    width: 1200px;
    margin: 0 auto;
    text-align: left;
    padding-left: 10px
}

.step .step-title .section-title .main-carousel[data-v-cdea53b7] {
    width: 100%;
    height: 240px
}

.step .step-title .section-title .main-carousel .carousel-item[data-v-cdea53b7] {
    width: 60%
}

.image-container[data-v-cdea53b7] {
    position: relative
}

.carousel-image[data-v-cdea53b7] {
    width: 100%
}

.image-tooltip[data-v-cdea53b7] {
    position: absolute;
    top: 29%;
    left: 26%;
    transform: translate(-50%, -50%);
    padding: 5px 10px;
    border-radius: 5px;
    z-index: 1
}

.image-tooltip .tooltip-title[data-v-cdea53b7] {
    font-family: Microsoft YaHei;
    font-size: 24px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    color: #fff;
    margin-bottom: 10px
}

.image-tooltip .tooltip-content[data-v-cdea53b7] {
    font-family: Microsoft YaHei;
    width: 290px;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    color: #fff
}

.step[data-v-84ee614b] {
    margin-bottom: 66px
}

.container[data-v-84ee614b] {
    width: 1200px;
    margin: 20px auto;
    background: #fff;
    border-radius: 12px
}

.header[data-v-84ee614b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px
}

.title[data-v-84ee614b] {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a
}

.more[data-v-84ee614b] {
    color: #666;
    font-size: 14px;
    text-decoration: none
}

.more[data-v-84ee614b]:hover {
    opacity: .8
}

.grid-container[data-v-84ee614b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.app-card[data-v-84ee614b] {
    position: relative;
    border-radius: 12px;
    background: #f8f9fa;
    transition: transform .2s;
    cursor: pointer;
    min-height: 180px
}

.app-card img[data-v-84ee614b] {
    width: 282px;
    height: 168px
}

.app-card[data-v-84ee614b]:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px #00000014
}

.card-title[data-v-84ee614b] {
    font-family: Microsoft YaHei;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: normal;
    color: #333;
    padding-bottom: 6px
}

.card-desc[data-v-84ee614b] {
    font-family: Microsoft YaHei;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    color: #9e9e9e;
    padding-bottom: 5px
}

.install-btn[data-v-84ee614b] {
    text-decoration: none;
    position: absolute;
    bottom: 27px;
    right: 20px;
    background: #00CE68;
    color: #fff;
    padding: 3px 16px;
    border-radius: 20px;
    font-size: 12px;
    opacity: 0;
    transition: opacity .2s;
    border: none;
    cursor: pointer
}

.app-card:hover .install-btn[data-v-84ee614b] {
    opacity: 1
}

.step[data-v-b1f9dd74] {
    margin-bottom: 66px;
    font-family: Microsoft YaHei;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    letter-spacing: normal;
    color: #222
}

.custom[data-v-08da53c8] {
    overflow: hidden;
    height: 100vh;
    overflow-y: scroll
}